<template>
  <div class="container-step2">
    <p class="title">确认挂号信息</p>
    <el-card>
      <template #header>
        <div class="card-header">
          <span>请点击选择就诊人信息</span>
          <el-button type="primary" :icon="Plus">添加就诊人</el-button>
        </div>
      </template>
      <!-- 展示就诊人信息,封装组件 -->
      <div class="user">
        <Visitor
          v-for="item in patientList"
          @click="currentVisotor = item"
          :isSelected="currentVisotor?.id == item.id"
          :patient="item"
          :key="item.id"
          class="item" />
      </div>
    </el-card>
    <!-- 卡片展示医生信息 -->
    <el-card>
      <!-- <template #header>
        <div class="card-header">
          <span>挂号信息</span>
        </div>
      </template> -->
      <el-descriptions class="margin-top" title="挂号信息" :column="2" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊日期</div>
          </template>
          {{ doctorDetail?.workDate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊医院</div>
          </template>
          {{ doctorDetail?.param.hosname || '--' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">就诊科室</div>
          </template>
          {{ doctorDetail?.param.depname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生姓名</div>
          </template>
          <el-tag size="small">{{ doctorDetail?.docname }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生职称</div>
          </template>
          {{ doctorDetail?.title }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医生专长</div>
          </template>
          {{ doctorDetail?.skill }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">医事服务费</div>
          </template>
          {{ doctorDetail?.amount }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div class="btn">
      <el-button
        type="primary"
        style="margin-top: 20px"
        :disabled="!currentVisotor"
        @click="submitOrder"
        >确认挂号</el-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Plus } from '@element-plus/icons-vue'
import { reqPatientList } from '@/api/patient'
import { reqSubmitOrder } from '@/api/order'
import { reqHospitalScheduleId } from '@/api/hospital'
import { ScheduleIdDetail } from '@/api/hospital/type'
import { PatientArr, Patient } from '@/api/patient/type'
const { scheduleId } = defineProps(['scheduleId'])

const $route = useRoute()
const $router = useRouter()
onMounted(() => {
  getPatientList()
  getDoctorInfo()
})
const patientList = ref<PatientArr>([])
const currentVisotor = ref<Patient>()
const doctorDetail = ref<ScheduleIdDetail>()
const getPatientList = async () => {
  const result = await reqPatientList()
  patientList.value = result.data
}
const getDoctorInfo = async () => {
  const { data } = await reqHospitalScheduleId(scheduleId)
  doctorDetail.value = data
}
// 确认挂号
const submitOrder = async () => {
  const { data } = await reqSubmitOrder(
    $route.query.hoscode as string,
    scheduleId,
    currentVisotor.value?.id as number
  )
  // 跳转到order页面
  $router.push('/user/order?id=' + data)
}
</script>

<style lang="scss" scoped>
.container-step2 {
  .title {
    font-size: 20px;
    font-weight: 700;
  }
  .el-card {
    margin-top: 20px;
    width: 100%;
    :deep(.el-card__header) {
      padding: 0px 20px;
    }
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .user {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 31%;
      margin: 10px;
      cursor: pointer;
    }
  }
  .btn {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    .el-button {
      width: 150px;
      height: 40px;
    }
  }
}
</style>
